<template>
  <div style="background: #f8fafd; padding: 15px">
    <el-container>
      <el-header>
        <span>合作商搜索：</span
        ><el-input v-model="searcharea" placeholder="请输入"></el-input
        ><el-button type="primary" icon="el-icon-search" @click="search"
          >查询</el-button
        >
      </el-header>
      <el-main>
        <div class="main-header">
          <el-button @click="handleAdd"
            ><i class="el-icon-circle-plus-outline"></i>新建</el-button
          >
        </div>
        <div class="main-main">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="序号" width="120">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="合作商名称" width="180">
              <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                  {{ scope.row.name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="账号" width="150">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.account }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="设备数量" width="180">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.vmCount }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="分成比例" width="180">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.ratio + '%' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="联系人" width="180">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.contact }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="联系电话" width="180">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.mobile }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <template>
                  <el-button
                    type="text"
                    size="mini"
                    @click="reset(scope.$index, scope.row)"
                    >重置密码</el-button
                  >
                </template>
                <el-button
                  type="text"
                  size="mini"
                  @click="handleSee(scope.$index, scope.row)"
                  >查看详情</el-button
                >
                <el-button
                  type="text"
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="mini"
                  style="color: red"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
      <el-dialog
        :title="flag1 ? '新增合作商' : '修改合作商'"
        :visible.sync="dialogFormVisible"
        width="630px"
      >
        <el-form ref="forms" :model="form" :rules="rules">
          <el-form-item
            label="合作商名称:"
            :label-width="formLabelWidth"
            prop="name"
          >
            <el-input
              v-model="form.name"
              autocomplete="off"
              maxlength="10"
              show-word-limit
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="联系人:"
            :label-width="formLabelWidth"
            prop="contact"
          >
            <el-input
              v-model="form.contact"
              autocomplete="off"
              maxlength="10"
              placeholder="请输入"
              show-word-limit
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="联系电话:"
            :label-width="formLabelWidth"
            prop="mobile"
          >
            <el-input
              v-model="form.mobile"
              autocomplete="off"
              maxlength="11"
              placeholder="请输入"
              show-word-limit
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="分成比例："
            prop="ratio"
            :label-width="formLabelWidth"
          >
            <el-input-number
              v-model="form.ratio"
              placeholder="请输入"
              controls-position="right"
              :max="100"
              :min="0"
              @change="handleChange"
            ></el-input-number>
          </el-form-item>
          <el-form-item
            label="账号:"
            :label-width="formLabelWidth"
            prop="account"
            v-if="this.flag1 === true"
          >
            <el-input
              v-model="form.account"
              autocomplete="off"
              maxlength="18"
              placeholder="请输入"
              show-word-limit
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="密码:"
            :label-width="formLabelWidth"
            prop="password"
            v-if="this.flag1 === true"
          >
            <el-input
              v-model="form.password"
              autocomplete="off"
              maxlength="20"
              placeholder="请输入"
              show-word-limit
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="point">确 定</el-button>
        </div>
      </el-dialog>
      <div class="xiangqing">
        <el-dialog
          :visible.sync="dialogVisible"
          title="合作商详情"
          width="45%"
          height="120 "
        >
          <div class="top">
            <span class="left"> 合作商名称：{{ form.name }} </span>
            <span class="right"> 联系人：{{ form.contact }} </span>
          </div>
          <div class="bottom">
            <span class="left">联系电话：{{ form.mobile }} </span>
            <span class="right">分成比例：{{ form.ratio }} </span>
          </div>
        </el-dialog>
      </div>
      <el-dialog
        :visible.sync="centerDialogVisible"
        width="20%"
        center
        custom-class="reset"
      >
        <div>
          <i class="el-icon-warning"></i>
          <span>确定要重置合作商密码吗？</span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="centerDialogVisible = false"
            >取 消</el-button
          >
          <el-button size="small" type="primary" @click="handleReset"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import {
  getPartnerList,
  deletePartner,
  partnerAdd,
  partnerEdit,
  resetPassword
} from '@/api/PartnerManagement'
export default {
  name: 'partner-management',
  created() {
    this.getPartnerList()
  },
  data() {
    return {
      tableData: [],
      partnerList: [],
      dialogVisible: false,
      flag: true,
      flag1: true,
      searcharea: '',
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      partnerId: '',
      gridData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      centerDialogVisible: false,
      form: {
        id: '',
        name: '',
        ratio: undefined,
        contact: '',
        // phone: '',
        mobile: '',
        password: '',
        account: ''
      },
      formLabelWidth: '120px',
      rules: {
        id: [{ required: true, message: '请输入', trigger: 'blur' }],
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        ratio: [{ required: true, message: '请输入', trigger: 'blur' }],
        contact: [{ required: true, message: '请输入', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入', trigger: 'blur' }],
        password: [{ required: true, message: '请输入', trigger: 'blur' }],
        account: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  methods: {
    async reset(index, row) {
      this.centerDialogVisible = true
      this.partnerId = row.id
    },
    async search() {},
    async getPartnerList() {
      const res = await getPartnerList(this.params)
      console.log(res)
      this.partnerList = res
      this.tableData = res.currentPageRecords
    },
    handleEdit(index, row) {
      console.log(row)
      this.flag1 = false
      this.dialogFormVisible = true
      this.form.id = row.id
      this.form.name = row.name
      this.form.mobile = row.mobile
      this.form.contact = row.contact
      this.form.ratio = row.ratio
    },
    async point() {
      if (this.flag1 === true) {
        try {
          await this.$refs.remark.validate()
          const res = await partnerAdd(this.form)
          console.log(res)
          this.$message.success('添加成功')
          this.getPartnerList()
          this.dialogFormVisible = false
        } catch (err) {
          console.log(err)
        }
      } else {
        try {
          const res = await partnerEdit(this.form, this.form.id)
          console.log(res)
          this.getPartnerList()
          this.dialogFormVisible = false
          this.$message.success('修改成功')
        } catch (err) {
          console.log(err)
        }
      }
    },
    async handleDelete(index, row) {
      try {
        const res = await deletePartner(row.id)
        console.log(res)
        this.getPartnerList()
        this.$message.success('删除成功')
      } catch (err) {
        console.log(err)
      }
    },
    async handleSee(index, row) {
      this.dialogVisible = true
      this.form.name = row.name
      this.form.mobile = row.mobile
      this.form.contact = row.contact
      this.form.ratio = row.ratio + '%'
    },
    handleAdd() {
      this.flag1 = true
      this.dialogFormVisible = true
      this.form.name = ''
      this.form.ratio = undefined
      this.form.mobile = ''
      this.form.contact = ''
    },
    handleChange() {},
    async handleReset() {
      const res = await resetPassword(this.partnerId)
      console.log(res)
      this.centerDialogVisible = false
      this.$message.success('重置成功')
    }
  }
}
</script>

<style scoped lang="scss">
.el-header {
  background-color: #fff;
}
::v-deep .el-main {
  margin-top: 15px;
  height: 100vh;
  background-color: #fff;
}
.main-header {
  margin-bottom: 5px;
  .el-button {
    background-color: #e54b15;
    color: #fff;
    .el-icon-circle-plus-outline {
      margin-right: 5px;
    }
  }
}
.main-footer {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  .el-button {
    transform: scale(0.9);
    margin-right: 10px;
  }
  p {
    margin-left: 10px;
  }
}
::v-deep .el-dialog {
  border-radius: 10px;
  .el-input__inner {
    width: 400px;
    height: 40px;
  }
  .el-form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .el-form-item {
      width: 520px;
      .el-input-number.is-controls-right {
        width: 400px;
      }
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    bottom: 30px;
  }
  .el-dialog__title {
    font-weight: 700;
    font-size: 18px;
  }
}
::v-deep .el-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .el-input {
    width: 200px;
    .el-input__inner {
      height: 30px;
    }
  }
  .el-button {
    height: 40px;
    margin-left: 10px;
    text-align: center;
    transform: scale(0.8);
    // line-height: -10px;
  }
}
.el-message-box__wrapper {
  ::v-deep .el-message-box {
    width: 100px !important;
    background-color: #ccc333;
  }
}
.xiangqing {
  ::v-deep .el-dialog {
    height: 180px;
    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .left {
        margin-left: 30px;
      }
      .right {
        margin-right: 120px;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;
      .left {
        margin-left: 30px;
      }
      .right {
        margin-right: 120px;
      }
    }
  }
}
::v-deep .reset {
  width: 260px;
  height: 150px;
  padding: 0 18px 25px 17px;
}
</style>
